<template>
  <!DOCTYPE HTML>
  <html>
  <body>
  <!--header start here-->
  <div class="login-form">
    <div class="top-login">
      <span><img src="../../assets/img/group.png" alt=""/></span>
    </div>
    <h1>登录</h1>
    <div class="login-top">
        <div class="login-ic">
          <i ></i>
          <input type="text"  value="用户" onFocus="this.value = '';" onBlur="if (this.value === '') {this.value = 'Username';}"  v-model = "username"/>
          <div class="clear"> </div>
        </div>
        <div class="login-ic">
          <i class="icon"></i>
          <input type="password"  value="密码" onFocus="this.value = '';" onBlur="if (this.value === '') {this.value = 'password';} "v-model = "password"/>
          <div class="clear"> </div>
        </div>

        <div class="log-bwn">
          <button @click="login()"  value="Login" >登录</button>
        </div>
    </div>
    <p class="copy">© 2018.10.24</p>
  </div>
  <!--header start here-->
  </body>
  </html>
</template>
<script>

export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      username : '',
      password : ''
      // logining: false,
      // acount:{
      //   username: '',
      //   password:'',
      // },
      // rules:{
      //   username :[ {required: true, message: '请输入账号',trigger: 'blur'},],
      //   password :[ {required: true,message: '请输入密码', trigger: 'blur'},],
      // },
      // checked: true,
    };
  },methods:{
    login(){
      this.$axios.get('/login',{
        params:{
          username: this.username,
          password: this.password
        }
      }).then(res=>{
        //console.log(res.data.username);
        this.$router.push({path:'/'});
        this.setCookie("username",res.data.username,"1");
      }).catch(err=>{
        alert("用户名或密码错误");
        console.log(err);
      })
    },
    setCookie: function (cname, cvalue, exdays) {
      var d = new Date();
      d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
      var expires = "expires=" + d.toUTCString();
      console.info(cname + "=" + '111' + "; " + expires);
      document.cookie = cname + "=" + cvalue + "; " + expires;
      },
    getCookie: function (cname) {
      var arr, reg = new RegExp("(^| )" + cname + "=([^;]*)(;|$)");
      if (arr = document.cookie.match(reg))
        return (arr[2]);
      else
        return null;
      },

    // init(){
    //   this.$axios.get('/login').then(res=>{
    //     console.log(res)
    //   }).catch(err=>{
    //     console.log(err)
    //   })
    // }
  },
  created(){
    //this.init();
  }
  
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
@import '../../assets/css/login.css'
</style>
